<template>
    <view>
        <!-- pages/xiaoqu/xiaoqu.wxml 我的小区 -->
        <view>
            <van-button type="primary" block @tap.native="showPickerHandle">块级元素</van-button>
        </view>
        <view class="picker">
            <van-popup v-model="showPicker" round position="bottom">
                <van-picker title="小区" show-toolbar :columns="columns" @cancel="hidePickerHandle" @confirm="onConfirm" />
            </van-popup>
            <input @input="bindReason" placeholder="填写理由" class="reason" :value="reason" name="reason" />
        </view>
    </view>
</template>

<script>
// pages/xiaoqu/xiaoqu.js
export default {
    data() {
        return {
            status: 0,
            statusText: {
                0: '添加小区信息，物业审核后，可参与车位邻里共享。',
                1: '温馨提示：物业正在努力审核，预计在3个工作日内审核完毕，请耐心等待。'
            },
            pick: '',
            showPicker: true,
            columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
            reason: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function () {
    // }
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */ methods: {
        onConfirm(e) {
            this.setData({
                pick: e.detail.value,
                showPicker: false
            });
        },

        showPickerHandle(e) {
            this.setData({
                showPicker: true
            });
        },

        hidePickerHandle() {
            this.setData({
                showPicker: false
            });
        },

        bindReason(e) {
            this.setData({
                reason: e.detail.value
            });
        }
    }
};
</script>
<style>
@import './xiaoqu.css';
</style>
